<template>
  <div>
    <div class="video-box">
      <video class="video" ref="sp" src="http://7xkwa7.media1.z0.glb.clouddn.com/sample_video_L" preload="auto" webkit-playsinline playsinline
             @loadedmetadata="loadedmetadata"
             @timeupdate="timeupdate"
             @pause="pause"
             @touchend="touchendVideo"
             @touchstart="touchstartVideo"
      >
      </video>
      <img src="../../../static/images/collection/play.png" class="play-btn" ref="playBtn" @touchend="touchendBtn">
      <div class="controls" ref="videoControls">
        <div class="time">{{currentTime}}</div>
        <div class="progress-box" ref="proBox">
          <div class="progress-bar" ref="proBar">
            <span class="progress-circle" @touchstart="touchstartCircle($event)" @touchmove="touchmoveCircle($event)"></span>
          </div>
        </div>
        <div class="totle-time">{{totleTime}}</div>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    name: "weChat",

    data(){
      return {
        totleTime:null,
        currentTime:'00:00',
        timer:null,
      }
    },
    created(){

    },
    methods:{
      //当浏览器已加载音频/视频的元数据时触发。
      loadedmetadata(){
        let totleTime = this.$refs.sp.duration;
        this.totleTime = this.timeStamp(totleTime);
      },
      //当目前的播放位置已更改时触发。
      timeupdate(){
        let currentTime = this.$refs.sp.currentTime;
        let totleTime = this.$refs.sp.duration;
        this.currentTime = this.timeStamp(currentTime);
        let percentage = 100 *(currentTime / totleTime);
        this.$refs.proBar.style.width = percentage + '%';
        if(currentTime == totleTime){
          this.$refs.playBtn.src = '../../../static/images/collection/play.png'; //如果播放时间到总时间播放按钮图片换成停止图片
        }
      },
      //当音频/视频已暂停时
      pause(){
        this.$refs.playBtn.src = '../../../static/images/collection/play.png';
        this.$refs.playBtn.style.display = 'block';
        this.$refs.videoControls.style.display = 'flex';
        clearTimeout(this.timer);
      },
      //当手指从屏幕上离开的时候触发。
      touchendVideo(){
        this.timer=setTimeout(()=>{
          this.$refs.playBtn.style.display = 'none';
          this.$refs.videoControls.style.display = 'none';
          clearTimeout(this.timer);
        },2000)
      },
      //当手指触摸屏幕时候触发
      touchstartVideo(){
        this.$refs.playBtn.style.display = 'block';
        this.$refs.videoControls.style.display = 'flex';
      },
      //点击播放按钮
      touchendBtn(){
        if(this.$refs.sp.paused) {
          this.$refs.sp.play();
          this.$refs.playBtn.src = '../../../static/images/collection/pause.png';
          this.$refs.playBtn.style.display = 'none';
          this.$refs.videoControls.style.display = 'none';
        }else {
          this.$refs.sp.pause();
          this.$refs.playBtn.src = '../../../static/images/collection/play.png';
          this.$refs.playBtn.style.display = 'block';
          this.$refs.videoControls.style.display = 'flex';
          clearTimeout(this.timer);
        }
        return false;
      },
      //开始触摸到进度条圆点
      touchstartCircle(e){
        let point = this.fristPoint(e);
        this.changeBar(point.pageX); //全屏竖屏
      },
      //拖拉进度条
      touchmoveCircle(e) {
        e.stopPropagation();//阻止默认行为
        let point = this.fristPoint(e);
        this.changeBar(point.pageX); //全屏竖屏
      },
      //第一个手指为准
      fristPoint(e) {
        return e.touches ? e.touches[0] : e;
      },
      //拖拉函数
      changeBar(item) {
        let progress = this.$refs.proBox;
        let maxduration = this.$refs.sp.duration; //视频总时间
        let moveWidth, percentage;

        moveWidth = item - progress.getBoundingClientRect().left;

        percentage = 100 * (moveWidth / progress.offsetWidth);
        if (percentage > 100) {
          percentage = 100;
        }
        if (percentage < 0) {
          percentage = 0;
        }
        this.$refs.proBar.style.width = percentage + '%';

        this.$refs.sp.currentTime = maxduration * (percentage / 100);//视频进度时间传给当前时间
        this.$refs.sp.play();
        this.$refs.playBtn.src = '../../../static/images/collection/pause.png';
      },
      //分割时间函数
      timeStamp(second_time) {
        let time1 = ((parseInt(second_time) / 100)).toString();
        let time2 = time1.split(".")[1] ? (time1.split(".")[1].length == 1 ? time1.split(".")[1] + '0' : time1.split(".")[1]) : '00';
        let time = '00' + ':' + time2;
        if (parseInt(second_time) > 60) {
          let second = ((parseInt(second_time) % 60) / 100).toString();
          let min = (parseInt(second_time / 60) / 100).toString();
          let time3 = second.split(".")[1] ? (second.split(".")[1].length == 1 ? second.split(".")[1] + '0' : second.split(".")[1]) : '00';
          let time4 = min.split(".")[1] ? (min.split(".")[1].length == 1 ? min.split(".")[1] + '0' : min.split(".")[1]) : '00';
          time = time4 + ":" + time3;
        }
        return time;
      }
    }
  }
</script>

<style scoped>
  .video-box{
    width: 100%;
    height: 100%;
    position: relative;
  }
  .video{
    width: 100%;
    height: 100%;
  }
  .play-btn{
    width: 52px;
    height: 52px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  .controls{
    display: flex;
    justify-content: space-between;
    align-items: center;

    position: absolute;
    bottom: 50px;
    left: 0;
    right: 0;
  }
  .time,.totle-time{
    color: #ffffff;
    font-size: 12px;
  }
  .progress-box{
    width: 300px;
    height: 2px;
    background-color: #DB9595;
  }
  .progress-bar{
    width: 0;
    height: 100%;
    background-color: #EB3C06;
    position: relative;
  }
  .progress-circle{
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #EB3C06;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%,-50%);
  }
  video::-webkit-media-controls-panel{
    background-color: transparent;
  }
  video::-webkit-media-controls-mute-button{
    display: none;
  }
  video::-webkit-media-controls-fullscreen-button{
    display: none;
  }
  video::-internal-media-controls-download-button{
    display: none;
  }
  video::-webkit-media-controls-volume-slider{
    display: none;
  }
  video::-webkit-media-controls-current-time-display{
    color: #ffffff;
    font-size: 13px;
  }
  video::-webkit-media-controls-time-remaining-display{
    display: block !important;
    color: #ffffff;
    font-size: 13px;
  }
</style>
